<template>
	<div class="app-container">
		<el-card class="box-card">
			<div class="dataStatBox">
				<div class="rowFlex pb-lg c-title f-title text-bold  b-1px-b">
					<div>技师概况</div>
				</div>

				<div class="class-menu-list flex-warp mt-lg pt-md row">
					<div class="item-child flex-center pb-lg cursor-pointer">
						<div class="itemImg">
							<img src="@/assets/indImg/technicianCount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.technicianCount}}</div>
							<div class="f-caption">全部技师</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer">
						<div class="itemImg">
							<img src="@/assets/indImg/technicianOnlineCount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.technicianOnlineCount}}</div>
							<div class="f-caption">当前在线技师人数</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer">
						<div class="itemImg">
							<img src="@/assets/indImg/technicianNotlineCount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.technicianNotlineCount}}</div>
							<div class="f-caption">休息技师人数</div>
						</div>
					</div>
					<div class="item-child flex-center pb-lg cursor-pointer">
						<div class="itemImg">
							<img src="@/assets/indImg/technicianTakeOrderCount.png" />
						</div>
						<div class="flex-1 ml-lg c-title">
							<div class="f-sm-title text-bold">{{dataNum.technicianTakeOrderCount}}</div>
							<div class="f-caption">接单技师人数</div>
						</div>
					</div>
				</div>
			</div>
		</el-card>

		<el-card class="box-card">
			<div class="rowFlex pb-lg c-title f-title text-bold  b-1px-b">
				<div>技师数据统计</div>
			</div>
			<div class="rowFlex" >
				<div  style="width: 40%;">
					<el-table ref="singleTable" :data="teachList" highlight-current-row height="400px"
					 style="width: 100%">
						<el-table-column type="index" width="50" />
						<el-table-column property="name" label="省份" />
						<el-table-column property="count" label="技师数量" />
					</el-table>
				</div>
				<div style="height:400px;flex: 1;" >
						<div class="mt-lg pt-lg pb-lg c-title text-bold" style="text-align: center;">性别占比</div>
						<div id="rouderform" style="width: 50%;height:400px;margin: auto;" />
				</div>
				
			</div>
		</el-card>
	</div>
</template>

<script>
	const echarts = require("echarts")
	import {
		listTechnicianStatistics,
		getTechnicianStatistics,
		delTechnicianStatistics,
		addTechnicianStatistics,
		updateTechnicianStatistics,
		technicianStatistics,
		catchTeach,
		technicianDistribution
	} from "@/api/technicianStatistics/technicianStatistics";

	export default {
		name: "TechnicianStatistics",
		dicts: ['sos_status', 'order_notify_type'],
		data() {
			return {
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 技师统计表格数据
				technicianStatisticsList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 更新时间时间范围
				daterangeCreateTime: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {},
				dataNum: {},
				dataNumChare: [],
				teachList: []
			};
		},
		created() {
			// this.getList();
			this.getNumList()
			this.getNumChach()
			this.teachListNum()
			this.$nextTick(() => {})
		},
		methods: {
			async getNumList() {
				this.dataNum = await technicianStatistics()
			},
			async getNumChach() {
				this.dataNumChare = await catchTeach()
				this.initRouder()
			},
			async teachListNum() {
				this.teachList = await technicianDistribution()
			},
			initRouder() {

				//基于准备好的dom，初始化echarts实例
				var chartDom = document.getElementById('rouderform');
				if (chartDom) {
					let myChart = echarts.init(chartDom)
					myChart.setOption({
						tooltip: {
							trigger: 'item'
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							formatter: (name) => {
								let target, rate, arr
								for (let i = 0; i < this.dataNumChare.length; i++) {
									if (this.dataNumChare[i].name === name) {
										target = this.dataNumChare[i].value
										rate = this.dataNumChare[i].rate
									}
								}
								return arr = name + '  ' + target + '人' + '  ' + rate + '%'
							}
						},
						color: ['#f9c956', '#75bedc'],
						series: [{
							name: 'Access From',
							type: 'pie',
							radius: '50%',
							data: this.dataNumChare,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					})
				}
			},
			/** 查询技师统计列表 */
			getList() {
				this.loading = true;
				this.queryParams.params = {};
				if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
					this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
					this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
				}
				listTechnicianStatistics(this.queryParams).then(response => {
					this.technicianStatisticsList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: null,
					userName: null,
					technicianName: null,
					orderNo: null,
					notifyType: null,
					isRead: null,
					isDelete: null,
					createTime: null,
					updateTime: null
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.daterangeCreateTime = [];
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加技师统计";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id || this.ids
				getTechnicianStatistics(id).then(response => {
					this.form = response.data;
					this.open = true;
					this.title = "修改技师统计";
				});
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.id != null) {
							updateTechnicianStatistics(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							addTechnicianStatistics(this.form).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$modal.confirm('是否确认删除技师统计编号为"' + ids + '"的数据项？').then(function() {
					return delTechnicianStatistics(ids);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('technicianStatistics/technicianStatistics/export', {
					...this.queryParams
				}, `technicianStatistics_${new Date().getTime()}.xlsx`)
			}
		}
	};
</script>
<style lang="less">
	.flex-warp {
		flex-wrap: wrap;
	}

	.pt-md {
		padding-top: 10px;
	}

	.mt-lg {
		margin-top: 15px;
	}

	.class-menu-list .item-child {
		width: 25%;
	}

	.cursor-pointer {
		cursor: pointer;
	}

	.flex-center {
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;
	}

	.pb-lg {
		padding-bottom: 15px;
	}

	.flex-1 {
		-webkit-box-flex: 1;
		flex: 1;
	}

	.ml-lg {
		margin-left: 15px;
	}

	.c-title {
		color: #333333;
	}

	.text-bold {
		font-weight: bold;
	}

	.f-caption {
		font-size: 12px;
	}

	.f-sm-title {
		font-size: 20px;
	}

	.mt-lg {
		margin-top: 15px;
	}

	.box-card {
		margin: 20px;
	}

	.ml-ep {
		margin-left: 10px;
	}

	.b-1px-b {
		border-bottom: 1px solid rgba(0, 0, 0, .1);
	}

	.itemImg {
		width: 50px;
		height: 50px;

		img {
			width: 100%;
			height: 100%;
		}
	}
</style>